<!-- 去邮寄页面 -->
<template>
  <div class="mian">
    <div class="m-b-10">
      <el-checkbox v-model="isCheck" :label="$t('om.Unanimous')" />
    </div>
    <div>
      <Table
        :data="mailingData.bomData"
        :columns="bomColumns"
        serial
        :serialOptions="{
          pageNum: mailingData.list.pageNumber,
          pageSize: mailingData.list.pageSize,
        }"
        @getBomlist="getBomlist"
      >
        <template #btnSlot="{ scope }">
          <el-button size="small" type="warning" @click="deleteBom(scope.row)">{{
            $t('om.Removingpackages')
          }}</el-button>
        </template>
      </Table>
      <Pagination
        class="m-b-10"
        v-show="mailingData.list.totalRow > 0"
        :total="mailingData.list.totalRow"
        v-model:page="mailingData.list.pageNumber"
        v-model:limit="mailingData.list.pageSize"
        @pagination="handlePaginationChange"
      />
    </div>
    <div>
      <Table
        :data="mailingData.pcbData"
        :columns="pcbColumns"
        serial
        :serialOptions="{
          pageNum: mailingData.list.pageNumber,
          pageSize: mailingData.list.pageSize,
        }"
      >
        <template #btnSlot="{ scope }">
          <el-button size="small" type="warning" @click="deleteBom(scope.row)">{{
            $t('om.Removingpackages')
          }}</el-button>
        </template>
      </Table>
      <Pagination
        class="m-b-10"
        v-show="mailingData.pcbList.totalRow > 0"
        :total="mailingData.pcbList.totalRow"
        v-model:page="mailingData.pcbList.pageNumber"
        v-model:limit="mailingData.pcbList.pageSize"
        @pagination="handlePaginationPcbChange"
      />
    </div>
    <div class="footer">
      <span>{{ $t('om.onthecomponentpackage') }}</span> <Tips :content="text" />
      <el-radio-group v-model="isRadio" @change="changeRadio" class="ml-4">
        <el-radio label="1" size="large">{{ $t('om.Yes') }}</el-radio>
        <el-radio label="2" size="large">{{ $t('om.No') }}</el-radio>
      </el-radio-group>
      <el-button type="primary" class="m-l-50" :disabled="isDisabled" @click="submitForm">{{
        $t('om.gotothemail')
      }}</el-button>
    </div>
  </div>

  <el-dialog v-model="bomData.centerDialogVisible" :title="$t('om.Prompts')" width="25%" center>
    <span>{{ $t('om.confirm_removal_from_cart', { name: mailingData.serialNumber }) }}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="bomData.centerDialogVisible = false">{{ $t('smt.Cancel') }}</el-button>
        <el-button type="primary" @click="confirmDeletePackage"> {{ $t('smt.Define') }} </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted, defineExpose } from 'vue';
import Table from '@/components/Table/index.vue';
import { ElMessage } from 'element-plus';
import Tips from '@/components/Tips/index.vue';
import { useRouter } from 'vue-router';
import {
  queryPagePcbaSmtBomOrderExpressList,
  queryPagePcbaSmtPcbExpressMaterialsList,
  deleteExpressMaterialsId,
  queryPagePcbaWaitExpressMaterialsList,
} from '@/server/api/biz.js';
import Pagination from '@/components/Pagination/index.vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const bomColumns = [
  {
    label: t('use.MailingComponents'),
    prop: 'elementInfo',
  },
  {
    label: t('om.MailingQuantity'),
    width: '200px',
    prop: 'goMailingQuantity',
  },
  {
    label: t('smt.Operational'),
    width: '200px',
    type: 'btn',
  },
];
const pcbColumns = [
  {
    label: t('om.MailedPCBs'),
    prop: 'elementInfo',
  },
  {
    label: t('om.MailingQuantity'),
    width: '200px',
    prop: 'totalQuantity',
  },
  {
    label: t('smt.Operational'),
    width: '200px',
    type: 'btn',
  },
];
const router = useRouter();
const mailingData = reactive({
  list: {
    list: [],
    pageNumber: 1,
    pageSize: 10,
    totalRow: 0,
  },
  pcbList: {
    list: [],
    pageNumber: 1,
    pageSize: 10,
    totalRow: 0,
  },
  bomData: [],
  pcbData: [],
  MailId: [],
});
const isCheck = ref(false);
const isRadio = ref('2');
const text =
t('om.component_package_instruction');
let bomData = reactive({
  centerDialogVisible: false,
  expressMaterialsId: '',
});
const isDisabled = ref(true);

onMounted(() => {
  getBomlist(1, 10);
  getPcblist(1, 10);
});

const changeRadio = (val) => {
  console.log(val);
  if (val === '1') {
    isDisabled.value = false;
  } else {
    isDisabled.value = true;
  }
};

const submitForm = () => {
  if (isCheck.value) {
    router.push({
      path: '/confirm-mail',
    });
  } else {
    ElMessage.error(t('mall.select_all_first'));
  }
};

/**
 * 删除bom包裹
 * @param {*} row
 */
const deleteBom = (row) => {
  console.log(row);
  bomData.centerDialogVisible = true;
  bomData.expressMaterialsId = row.id;
};

/**
 * 确认删除包裹
 */
const confirmDeletePackage = () => {
  deleteExpressMaterialsId({ expressMaterialsId: bomData.expressMaterialsId }).then((res) => {
    if (res.code === 200) {
      bomData.centerDialogVisible = false;
      getBomlist();
      getPcblist();
    } else {
      ElMessage.error(res.msg);
      bomData.centerDialogVisible = false;
    }
  });
};

/**
 * 获取bom邮寄列表
 */
const getBomlist = (page = 1, limit = 10) => {
  mailingData.bomData = [];
  const obj = {
    bomId: 0,
    customerAccountId: 0,
    expressId: 0,
    limit: limit,
    materialsType: 0,
    orderStatus: 0,
    page: page,
    pageType: 1,
    pcbOrderId: 0,
    pcbaOrderId: 0,
    productId: 0,
    serial: '',
    smtOrderDetailId: 0,
    smtOrderId: 0,
  };
  queryPagePcbaSmtBomOrderExpressList(obj).then((res) => {
    if (res.code === 200) {
      mailingData.bomData = res.data.list;
      mailingData.list = res.data;
      console.log(res, 111);
    } else {
      ElMessage.error(res.msg);
    }
  });
};

/**
 * 获取pcb邮寄列表
 */
const getPcblist = (page = 1, limit = 10) => {
  mailingData.pcbData = [];
  const obj = {
    bomId: 0,
    customerAccountId: 0,
    expressId: 0,
    limit: limit,
    materialsType: 0,
    orderStatus: 0,
    page: page,
    pageType: 1,
    pcbOrderId: 0,
    pcbaOrderId: 0,
    productId: 0,
    serial: '',
    smtOrderDetailId: 0,
    smtOrderId: 0,
  };
  queryPagePcbaSmtPcbExpressMaterialsList(obj).then((res) => {
    if (res.code === 200) {
      mailingData.pcbData = res.data.list;
      mailingData.pcbList = res.data;
      console.log(res, 222);
    } else {
      ElMessage.error(res.msg);
    }
  });
};

defineExpose({
  getPcblist,
  getBomlist,
});

/**
 * 分页
 * @param {*} page
 * @param {*} limit
 */
const handlePaginationChange = (page = 1, limit = 10) => {
  console.log(val);
  getBomlist(page, limit);
};

const handlePaginationPcbChange = (page = 1, limit = 10) => {
  console.log(val);
  getPcblist(page, limit);
};
</script>
<style lang="scss" scoped>
.m-b-10 {
  margin-bottom: 10px;
}
.footer {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.m-l-50 {
  margin-left: 50px;
}
.mian {
  padding-top: 1px;
}
</style>
